
<style>
     .tab { width: 100%; height: 60px;}
     .tab ul { float: left;}
     .tab ul li { display: inline-block; width: auto; height: 30px; font-weight: 600; color: #00ACE6; padding: 0 10px;}
     .tab ul li.active { border-bottom: 2px solid #00BFFF;}
     .tab a { width: 100px; height: 30px; float: right; text-align: center; line-height: 30px; color: #fff; border-radius: 5px; background: #48CFAE;}
     .list_con { width: 100%; height: auto;}
     .item_header { width: 100%; height: 30px;}
     .list_item span , .item_header span { display: inline-block;}
     .list_item span:nth-of-type(1) , .item_header span:nth-of-type(1) { width: 50px; height: 30px;}
     .list_item span:nth-of-type(2) , .item_header span:nth-of-type(2) { width: 200px; height: 30px;}
     .list_item span:nth-of-type(3) , .item_header span:nth-of-type(3) { width: 200px; height: 30px;}
     .list_item span:nth-of-type(4) , .item_header span:nth-of-type(4) { width: 100px; height: 30px;}
     .list_item span:nth-of-type(5) , .item_header span:nth-of-type(5) { width: 200px; height: 30px;}
     .list_item { width: 100%; height: 70px; border-bottom: 1px solid #ccc; padding-top: 5px;}
     .list_item span a { display: inline-block; width: 100px; height: 30px; background: #00BFFF; color: #fff; text-align: center; line-height: 30px;}
     .list_item span a:hover { background: #00ACE6;}
     .layout_dialg  { display: none; width: 100%; height: 100%; position:fixed; left: 0; top: 0; background: rgba(0,0,0,.5); z-index: 999;}
    .dialg_window { width: 300px; height: 150px; background: #fff; margin: 0 auto; position: absolute; left: 50%; margin-left: -150px; top: 150px;}
    .dialg_name { width: 98%; height: 30px; line-height: 30px; padding-left: 2%; background: #333; color: #fff; }
    .dialg_content { width: 80%; height: 40px; line-height: 40px; margin:10px auto 0 auto;}
    .button { width: 80%; height: 30px; margin: 10px auto;}
     .button a { display: inline-block; width: 80px; height: 30px; text-align: center; line-height: 30px; color: #fff; background: #00ABF1; margin-right: 25px;}
</style>
<div class="tab">
    <ul>
        <li class="active">已选择商品</li>
    </ul>
    <a href="javascript:;" id="addGoods">添加自选</a>
</div>
<div class="list_con">
     <div class="item_header">
           <span>商品ID</span>
           <span>商品图片</span>
           <span>商品名称</span>
           <span>商品价格</span>
           <span>商品数量</span>
           <span>操作</span>
     </div>
    <?php foreach($output['goodsList'] as $v){ ?>
     <div class="list_item">
          <span>
               <?php echo $v['goods_id'] ?>
          </span>
          <span><img src="<?php echo thumb($v); ?>" alt="" width="60"; height="60"></span>
          <span><?php echo $v['goods_name'] ?></span>
          <span><?php echo $v['goods_price'] ?>(￥)</span>
          <span><?php echo $v['goods_storage'] ?>(件)</span>
          <span><a href="javascript:;" data-id="<?php echo $v['goods_id'] ?>" onclick="delGoods(this)">删除</a></span>
     </div>
     <?php } ?>
</div>
<?php if($output['goodsList']){ ?>
<div class="pagination"> <?php echo $output['show_page']; ?> </div>
<?php } ?>
<div class="layout_dialg">
     <div class="dialg_window">
          <div class="dialg_name">提示</div>
          <div class="dialg_content">
               你确定要删除吗？
          </div>
          <div class="button">
              <a href="javascript:;" id="sub">确定</a>
              <a href="javascript:;" id="cancel">取消</a>
          </div>
     </div>
</div>
<script>


    var id = '';
    var object = '';

    /**
     * 删除自选商品
     * @param obj
     */
    function delGoods(obj){
        $(".layout_dialg").fadeIn();
        id = obj.getAttribute('data-id');
        object = obj;
    }

    $('#sub').on('click',function(){
        var objparent = object.parentNode.parentNode;
        url = "/index.php?act=store_goods_select&op=delgoods";
        $.ajax({
            type:"POST",
            url:url,
            data:{id:id},
            dataType:"text",
            success:function(data){
                if (data==1){
                    document.getElementsByClassName('list_con')[0].removeChild(objparent);
                    $(".layout_dialg").fadeOut();
                }else{
                    alert('删除失败')
                }
            }
        })
    })

    $('#cancel').on('click',function(){
        $(".layout_dialg").fadeOut();
    })

    $("#addGoods").on('click',function(){
        // 已经插入的商品数量计算
        var count = 10 - $('.insert-goods > dl').length; // 0 已经插入的商品数量
        var _uri ="<?php echo CIRCLE_SITE_URL ?>/index.php?act=theme&op=choosegoods&c_id=1";
        CUR_DIALOG = ajax_form("choosegoods", '选择商品', _uri, 510);
    });
</script>

